<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分享圈详情</title>
    <!-- <link rel="stylesheet" href="css/bootstrap.css"> -->
</head>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    var lis = null;
    var inner = null;
    window.onload = function(){    
        if(localStorage.getItem('loginName')){
                var links=document.querySelectorAll('#headright a')
                for(var i=0;i<links.length;i++){
                    links[i].style.display='none';
                }
                document.querySelector("#loginName").style.display='inline-block';
                document.querySelector("#unregister").style.display='inline-block';
                document.querySelector('#headright span').style.display="none";
                document.querySelector('#loginName').innerHTML="当前账号："+'<a href="personal.html">'+localStorage.getItem('loginName')+'</a>'
            }
    }
</script>
<script>
                //导航栏固定
            //     window.onload=function(){
            //           //登录后显示当前用户
            // if(localStorage.getItem('loginName')){
            //     var links=document.querySelectorAll('#headright a')
            //     for(var i=0;i<links.length;i++){
            //         links[i].style.display='none';
            //     }
            //     document.querySelector("#loginName").style.display='inline-block';
            //     document.querySelector("#unregister").style.display='inline-block';
            //     document.querySelector('#headright span').style.display="none";
            //     document.querySelector('#loginName').innerHTML="当前账号："+'<a href="personal.html">'+localStorage.getItem('loginName')+'</a>'
            // }
            //     }
                window.onscroll=function(){
            if(document.documentElement.scrollTop>=80){
                document.getElementById('bodynav').style.position='fixed';
                document.getElementById('bodynav').style.top=0;
                document.getElementById('bodynav').style.left=0;
            }
            else{
                document.getElementById('bodynav').style.position='static';
            }
        
      

        }
        //套餐下拉框
            $(function () {
            $('#secondnav').mouseover(function () {
                $('#choose').css('display', 'block')
            })
            $('#secondnav').mouseout(function () {
                $('#choose').css('display', 'none')
            })
        })
        //健康饮食下拉框
        $(function () {
            $('#down').mouseover(function () {
                $('#updown').css('display', 'block')
            })
            $('#down').mouseout(function () {
                $('#updown').css('display', 'none')
            })
        })


        //注销事件
        function unregister(){
            localStorage.removeItem('loginName');
            location.replace('shouye.html')
        }
       
</script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style: none;
    }
 #big {
            width: 100%;
            min-width: 1200px;
            height: 100%;
         
        }
        #head {
            width: 80%;
            height: 80px;
            background-color: white;
            margin: 0 auto;
            /* background-color: yellow; */
        }

        #logo {
            /* background-color: red; */
            width: 30%;
            height: 80px;
            float: left;
            position: relative;
            left: 10px;
        }

        #headleft {
            width: 50%;
            float: left;
            height: 80px;
            /* background-color: yellow; */
        }

        #headleft1 {
            height: 80px;
            line-height: 80px;
        }

        #textword {
            width: 250px;
            height: 30px;
        }

        #textsearch {
            width: 50px;
            height: 35px;
            border: 1px solid #ccc;
            background: url(images/serach.jpg);
        }

        /*背景图  */
        #login {
            text-decoration: none;
            color: #407434;
        }

        #login img {
            width: 20px;
            height: 80px;
        }

        #headright {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        /* 注销按钮 */
        #loginName,#unregister{
           display: none;
        }
        #unregister{
            height: 25px;
            width:50px;
            border: none;
            outline: none;
            border-radius: 5px;
            background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
            box-shadow: 0 0 3px rgb(64, 116, 52);
            cursor: pointer;
            color: white;
        }
        #bodynav {
            width: 100%;
            height: 60px;
            background-color: rgb(160, 190, 117);
            z-index: 2;
            /* background-color: red; */
        }

        #nav {
            width: 80%;
            height: 60px;
            margin: 0 auto;
            background-color: rgb(160, 190, 117);
            /* background-color:pink; */
        }
        #nav li {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            width: 20%;
            float: left;
        }

        #nav a {
            color: grey;
            font-weight: bold;
        }

        #nav a:hover {
            color: #407434;
            font-weight: bold;
        }
        /* 套餐下拉框 */
       #choose {
            width: 100%;
            display: none;
        }

        #pep {
            list-style: none;
            /* margin-left:10%; */
            align-items: center;
            position: relative;
            left: 25%;
            z-index: 5;
        }

        #pep dd {
            width: 50%;
            height: 50px;
            line-height: 50px;
            background-color: rgb(230, 230, 230);
            font-size: 14px;              
            position: relative;
        }

        #pep dd a {
            color: grey;
        }
        /* 健康饮食下拉框 */
        #updown{
            width: 100%;
            display: none;
        }
        #up{
            list-style: none;
            position: relative;
            left: 25%;
            z-index: 5;
        }
        #up dd{
            width:50%;
            height: 50px;
            line-height: 50px;
            background-color:  rgb(230, 230, 230);
            font-size: 14px;
            position: relative;
        }
        #up dd a{
            color:grey;
        }

       /* 中间格式 */
       #main{
            width: 80%;
            margin: 0 auto;
            /* border: 1px solid black; */
            height:100%;
            border-radius: 25px;
            float: left;
            position: relative;
            left: 50%;
            margin-left: -40%;
            /* justify-content: center; */
            /* background-color:white; */
            /* height: 2000px; */
        }
    #txt{
        position: relative;
        left:50%;
        margin-left:-45%;
        margin-top: 30px;
        /* border: 1px solid red; */
        /* float: left; */
        width: 90%;
        /* display: flex; */
        /* flex-direction: column; */
      
     
    }  
    #txt h1{
        /* border: 1px solid black; */
        float: left;
        width: 50%;
        position: relative;
        left: 50%;
        /* top:-50%; */
        margin-left: -30%;
        /* align-items: center; */
        /* top: 50%; */
        margin-top: 1.5%;
        /* height: 80px; */
        font-size: 50px;
      /* align-items: center; */
    
        }
    #touxiang{
        float:right;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
        width: 100px;
        /* border: 1px solid green; */
        margin-right: 15%;
    }
    #touxiang img{
        display: block;
        border-radius: 50%;
        border: 1px solid gray;
        height: 70px;
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
    }
    #id{
        display:block;
        text-align: center;
        /* float: right; */
        /* border: 1px solid yellow;  */
        margin-bottom: 0px;
        width: 100%;
        margin:0 auto;
        font-weight: bold;
    }
    #comment{  
        margin-top:50px;
        position: relative;
        left: 50%;
        margin-left: -45%;
        float:left;
        width: 90%;
        height: 100%;
        /* border: 1px solid gray; */
    }
    /* 大图 */
    /* #img{
        /* border:1px solid purple; */
        


    #img img{
        /* position: relative;
    left: 50%;
    margin-left: -30%; */
    width: 100%;
    height: 500px;
    }
    #bz{
        margin-top: 30px;
        margin-left: 40px;
        font-size: 30px;

    }
    /* 步骤的DIV */
    #buzhou{
        float: left;
        width: 100%;
        /* height: 500px; */
        /* border: 1px solid blue; */
        margin-top: 30px;
    }
    #buzhou li {
        height: 350px;
        
        margin-bottom: 40px;
        width: 100%;
        display: inline-block;
        position: relative;
        /* border: 1px solid black; */
    }
    #buzhou img {
        width: 100%;
        margin-left: 30px;
        height: 100%;
       
        
    }
    .buzhoutu{
        float: left;
        width: 50%;
        /* border: 1px solid pink; */
        height: 100%;
    }
 
    .wenzi{
        float: right;
        width: 440px;
        /* border:1px solid red; */
        height: 100%;
        display: flex;
       

    }
    .shuzi{
        border: 1px solid gray;
        border-radius: 50%;
        float: left;
        width: 40px;
        font-size: 30px;
        text-align: center;
        margin-bottom: 50px;
        position: relative;
        left: 50%;
        margin-left:-20px;
    }
    .p{
        /* border: 1px solid blue; */
        margin: auto;
        float: left;
        width: 100%;
    }
    .wenzi p{
        font-size: 18px;
        font-weight: bold;
        float: left;
        
        width: 100%;
    }
  
          /* 底部 */
          #bottom {
            width: 100%;
            height: 150px;
            margin-top: 0px;
            background-color:rgba(30,30,30,0.4);
            justify-content: flex-end;
            float: left;
            /* position: absolute;
            bottom: 0px; */
           
        }
        #bottomtext {
            width: 80%;
            height: 150px;
            margin: 0 auto;
        }
        #bottomleft {
            float: left;
            width: 200px;
            height: 150px;
            position: relative;
            top: 10px;
        }
        #bottomrighttext a,#bottomleft span,#bottomrighttext span,#bottomrighttext a{
            color: grey;
        }
        #bottomleft img {
            width: 200px;
            height: 80px;
        }
        #bottomright {
            width: 100%-200px;
            height: 150px;

        }
        #bottomrighttext {
            padding: 30px;
            position: relative;
            top: 40px;
            left: 30px;
        }
        #bottomrighttext a {
            text-decoration: none;
            margin-left: 15px;
        }
        h4{
            /* font-size: 10px; */
            color: firebrick;
        }
</style>
<body>
    <div id='big'>
        <div id="head">
                <div id="logo">
                    <img src="images/logo1.jpg" alt="" width="200px" height="80px">
                </div>
                <div id="headleft">
                    <div id="headleft1">
                        <form action="#">
                            <input id="textword" type="text"><input id="textsearch" type="submit" value=" ">
                        </form>
                    </div>
                </div>
                <div id="headright">
                    <a href="login.html" id="login">登录</a>
                    <span>|</span>
                    <a href="register.html" id="login">注册</a>
                    <span id="loginName"></span>
                    <button id="unregister" onclick="unregister()">注销</button>
                </div>
            </div>
            <div id="bodynav">
                <div id="nav">
                    <ul>
                        <li><a href="shouye.html">首页</a></li>
                        <li id="secondnav"><a href="#">套餐</a>
                            <div id="choose">
                                <dl id="pep">
                                    <dd>人数</dd>
                                    <dd><a href="meetmenu2-3.html">2-3人</a></dd>
                                    <dd><a href="#">4-6人</a></dd>
                                    <dd><a href="#">7-8人</a></dd>
                                </dl>
                            </div>
                        </li>
                        <li id="down">
                            <a href="#">健康饮食 </a>
                            <div id="updown">
                                <dl id="up">
                                <dd><a href="">人体群众</a></dd>
                                <dd><a href="laoren.html">老人</a></dd>
                                <dd><a href="">孕妇</a></dd>
                                <dd><a href="">青少年</a></dd>
                                </dl>
                        </div>
                        </li>
        
                        <li><a href="fenxiangjiemian.html">分享圈</a></li>
                        <li><a href="contactus.html">联系我们</a></li>
                    </ul>
                </div>
            </div>
        
            <div id='main'>
                <div id='txt'>
                    <h1>海绵宝宝与章鱼弟</h1>
                    <a id='touxiang'>
                        <img src="images\nav2top5.jpg" alt="">
                    <span id='id'>
                        章鱼弟
                    </span>
                    </a>
                </div>


                <div id='comment'>
            <div id='img'>
                <img src="images\yxrs.jpg">
                    </div>
            <div id='bz'>
                <h4>红烧肉的步骤</h4>
            </div>
                  <div id='buzhou'>
                   <ul>
                       <li>
                           <div class="buzhoutu">
                               <img src="images\1.png" alt="">
                           </div>
                           <div class="wenzi">
                               
                               <div class="p">
                                <span class="shuzi">1</span>   
                                <p>锅中倒油，翻入姜片，放入鲫鱼，小火慢煎，煎至金黄后翻面</p></div>
                               
                           </div>
                       </li>
                       <li>
                            <div class="buzhoutu">
                                <img src="images\2.png" alt="">
                            </div>
                            <div class="wenzi">
                                
                                <div class="p">
                                 <span class="shuzi">2</span>   
                                 <p>锅中倒750ml水煮沸，倒入煎好的鱼</p></div>
                                
                            </div>
                        </li>
                        <li>
                                <div class="buzhoutu">
                                    <img src="images\3.png" alt="">
                                </div>
                                <div class="wenzi">
                                    
                                    <div class="p">
                                     <span class="shuzi">3</span>   
                                     <p>加入姜片、葱段、料酒3g、胡椒粉1g、鸡粉5g、盐3g、嫩豆腐250g</p></div>
                                    
                                </div>
                            </li>
                            <li>
                                    <div class="buzhoutu">
                                        <img src="images\4.png" alt="">
                                    </div>
                                    <div class="wenzi">
                                        
                                        <div class="p">
                                         <span class="shuzi">4</span>   
                                         <p>大火煮沸转至中火，加盖炖煮15分钟;出锅，完成</p></div>
                                        
                                    </div>
                                </li>
                   </ul>
                </div>
                </div>
                </div>   
            </div>

            <div id="bottom">
                    <div id="bottomtext">
                        <div id="bottomleft">
                            <img src="images/logo1.png" alt=""><br>
                            <span>一年四季，一日三餐</span>
                        </div>
                        <div id="bottomright">
                            <div id="bottomrighttext">
                                <span>关于恰饭吧</span>
                                <a href="#">网站介绍</a>
                                <a href="#">加入我们</a>
                                <a href="#">联系我们</a>
                                <a href="#">商务合作</a>
                                <a href="#">用户协议</a>
                                <a href="#">隐私政策</a>
                                <a href="#">网站地图</a>
                                <a href="#">友情链接</a>
                            </div>
                        </div>
                    </div>
                </div>
        
        </div>
</body>
</html>